import React, { Component } from 'react'
import {
  NavBar,
  WingBlank,
  List,
  WhiteSpace,
  InputItem,
  Flex,
  Checkbox,
  Button,
  Toast
} from 'antd-mobile'
import { connect } from 'react-redux' // 连接redux的工具
import PropTypes from 'prop-types'
import { Redirect } from 'react-router-dom'

import { register } from '../../redux/actions'
import Logo from '../../components/logo/logo'
import './register.scss'

const ListItem = List.Item
const CheckboxItem = Checkbox.CheckboxItem;


class Register extends Component {

  // props
  static propTypes = {
    register: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired
  }

  // state 数据
  state = {
    username: '', // 用户名
    password: '', // 密码
    password2: '', // 确认密码
    type: 'dashen', // 用户类型
  }

  // 输入信息
  handleChange = (key, value)=>{
    this.setState({[key]: value})
  }

  // 点击注册
  hangleRegister = ()=>{
    const { username, password, password2 } = this.state
    if (!username) {
      Toast.fail('请输入用户名！', 1)
    } else if (!password) {
      Toast.fail('请输入密码！', 1)
    } else if (!password2) {
      Toast.fail('请输入确认密码！', 1)
    } else if (password !== password2) {
      Toast.fail('两次输入密码不一致！', 1)
    } else {
      this.props.register(this.state)
    }
  }

  // 点击已有账号
  toLogin = ()=>{
    this.props.history.replace('/login')
  }
  render() {
    const checkboxData = [
      { value:'dashen', label: '大神' },
      { value:'laoban', label: '老板' }
    ]
    const {type} = this.state
    const { message, redirectTo } = this.props.user
    // 请求失败返回提示
    if (message) {
      Toast.fail(message, 1)
    }
    if (redirectTo) {
      return <Redirect to={redirectTo} />
    }
    return (
      <div>
        <NavBar>海绵招聘</NavBar>
        <div className="Logo-wrap">
          <Logo />
        </div>
        <WingBlank>
          <List>
            <WhiteSpace />
            <InputItem placeholder="请输入用户名" onChange={value => this.handleChange('username', value)}>用户名</InputItem>
            <WhiteSpace />
            <InputItem type="password" placeholder="请输入密码" onChange={value => this.handleChange('password', value)}>密&nbsp;&nbsp;&nbsp;码</InputItem>
            <WhiteSpace />
            <InputItem type="password" placeholder="请再次输入密码" onChange={value => this.handleChange('password2', value)}>确认密码</InputItem>
            <WhiteSpace />
            <ListItem>
              <Flex>
                <span>用户类型</span>
                {checkboxData.map(item => (
                  <CheckboxItem checked={type === item.value} key={item.value} onClick ={() => this.handleChange('type',item.value)}>{item.label}</CheckboxItem>
                ))}
              </Flex>
            </ListItem>
            <WhiteSpace />
            <Button type="primary" onClick={this.hangleRegister}>注&nbsp;&nbsp;&nbsp;册</Button>
            <WhiteSpace />
            <Button type="primary" onClick={this.toLogin}>已有账号</Button>
            <WhiteSpace />
          </List>
        </WingBlank>
      </div>
    )
  }
}

export default connect(
  state => ({ user: state.user }),
  { register }
)(Register) 
